<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>添加字典</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-form" lay-filter="sys-dict-form" id="sys-dict-form" style="padding: 20px 0 0 0;">
  <div class="layui-form-item">
    <label class="layui-form-label">字典名称</label>
    <div class="layui-input-inline">
      <input type="text" name="dictName" lay-verify="required" placeholder="请输入字典名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">字典别名</label>
    <div class="layui-input-inline">
      <input type="text" name="dictKey" lay-verify="required" placeholder="请输入字典别名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-inline">
      <input type="number" name="orderNum" lay-verify="required" placeholder="请输入排序" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" lay-filter="sex">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block" id="enabled"></div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-inline">
      <input type="text" name="remark" placeholder="请输入备注" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-header">字典项</div>
  <div class="layui-card-body">
    <table id="dictTable" lay-filter="dictTable"></table>
    <script type="text/html" id="tableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-edit"></i>添加</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
  </div>
</div>
  <script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
  <script th:inline="javascript">
  let ctx = [[${#request.getContextPath()}]];
  layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
     index: 'lib/index', //主入口模块
  }).use(['index', 'form','table','crud'], function(){
    let $ = layui.$
        , form = layui.form
        , crud = layui.crud
        , table = layui.table
        , dictValues = []
        ,defJson = {
          "dictValueName": ""
          ,"dictValueKey": ""
          ,"orderNum": ""
          ,"remark": ""
        };
      dictValues.push(defJson);

    form.on('submit(save-submit)', function(data) {
      let values = table.cache['dictTable'];
      data.field.sysDictValues = values;
      $.ajax({
        type: 'POST',
        url:  ctx + '/sysDict/add',
        data: JSON.stringify(data.field),
        contentType:'application/json;charset=UTF-8',
        dataType: 'json',
        success: function(result) {
          layer.msg(result.message);
          if (result.code === 200) {
            let index = parent.layer.getFrameIndex(window.name);
            // 关闭
            parent.layer.close(index);
            // 刷新
            parent.location.reload();
          }
        }
      });
    });
    /**
     * 字典值列表
     */
    table.render({
      elem: '#dictTable'
      ,cellMinWidth: 80
      ,cols: [
              [
               {field: 'dictValueName', edit: 'text', title: '字典值名称'}
              ,{field: 'dictValueKey', edit: 'text', title: '字典值别名'}
              ,{field: 'remark', edit: 'text', title: '备注'}
              ,{field: 'orderNum', edit: 'text', title: '序号'}
              ,{toolbar: '#tableBar', title: '操作', width: 165, align:'center',fixed: 'right'}
            ]
      ]
      ,data: dictValues
      ,even: true
    });

    //监听单元格编辑
    table.on('edit(dictTable)', function(obj){
      let value = obj.value //得到修改后的值
              ,field = obj.field; //得到字段
      layer.msg(field + ' 字段更改为：'+ value);
    });

    //监听行工具事件
    table.on('tool(dictTable)', function(obj){
      let layEvent = obj.event;
      let dictData = table.cache['dictTable'];
      if(layEvent === 'add'){
        let defJson = {
          "dictValueName": ""
          ,"dictValueKey": ""
          ,"orderNum": ""
          ,"remark": ""
        };
        dictData.push(defJson);
        table.reload('dictTable',{
          data: dictData
        });
      } else if(layEvent === 'del'){
        layer.confirm('真的删除行么', function(index) {
          let rowIndex = $(obj.tr).attr("data-index");
          obj.del();
          dictData.splice(rowIndex,1);
          table.reload('dictTable',{
            data: dictData
          });
          layer.close(index);
        });
      }
    });
    crud.setRadio("enabled","enabled","Y");
  });
  </script>
</body>
</html>